import axios from 'axios'
import { MessageBox, Message } from 'element-ui' // 引入element-ui提供弹窗
import store from '@/store' // 引入vuex里store仓库对象
import { getToken } from '@/utils/auth' // 引入获取本地token的方法

// axios.create() 创建一个自定义配置的 axios实例
// 创建的实例等同于以前axios, 可以用serview发起请求
// service多了{}里的配置
const service = axios.create({
  // baseURL axios请求基地址
  // 就是你用service发起的请求
  // 请求时完整地址就是 baseURL + url -> 要请求的完整地址
  // 例如: baseURL: '/api',  url: '/sys/login/
  // 本次请求完整url是: '/api/sys/login'
  baseURL: process.env.VUE_APP_BASE_API,
  // withCredentials: true, // send cookies when cross-domain requests
  // 超时时间: 本次请求5秒内还未得到后台响应, 本次判定超时
  timeout: 5000 // request timeout
})

// 一定要记住, 一定要记住, 一定要记住
// request:  请求  前 -> 后
// response: 响应  前 <- 后

// 请求拦截器
// views逻辑页面中 -> 调用api里接口方法 -> request.js中service(axios方法) -> 再执行请求拦截器
// 参数1: 箭头函数体 -> 发起请求之前会走这里(必须return 请求配置对象, return到axios的use内)
// 参数2: 箭头函数体 -> 在发起请求前, axios内有报错, 直接跳转进入error函数体
service.interceptors.request.use(
  config => {
    return config
  },
  error => {
    // 等价于 new Promise((resolve, reject) => { reject(error) })
    // Promise.reject() 类的对象(简化写法)
    return Promise.reject(error)
  }
)

// 响应拦截器
// 参数1: 箭头函数体 -> (成功)只有在响应状态码为2xx, 3xx的时候, 进入
// 参数2: 箭头函数体 -> (错误)只有在响应状态码为4xx, 5xx(或者捕获到了其他错误)的时候, 进入
service.interceptors.response.use(
  response => {
    return response
  },
  error => {
    // axios()函数原地, 那个Promise对象接到了失败的状态
    return Promise.reject(error)
  }
)

export default service
